<template>
  <div class="main" :style="style">
    <div class="common">
      <div>
        <img class="titleimg" :src="require('../../assets/title.png')" alt="" />
      </div>
      <div class="login">
        <div>
          <!-- <i class="el-icon-user" style="font-size: 30px; color: #249087"></i> -->
          <img
            style="width: 54px; height: 54px"
            :src="require('../../assets/user.png')"
            alt=""
          />
        </div>
        <div class="form">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="0px"
            class="demo-ruleForm"
          >
            <el-form-item label="" prop="userName">
              <el-input
                placeholder="请输入用户名"
                v-model="ruleForm.userName"
              ></el-input>
            </el-form-item>
            <el-form-item label="" prop="password" class="rem">
              <el-input
                placeholder="请输入密码"
                v-model="ruleForm.password"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item label="" prop="" class="rem2">
              <el-checkbox v-model="remember" class="check"
                >记住账号密码</el-checkbox
              ></el-form-item
            >
            <el-form-item label="" prop="">
              <el-button :loading="loading" @click="login" class="loginBth"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { login, getMenu } from "@/common/api";
import { filterMenu } from "@/untils/roles";
export default {
  name: "Login",
  props: {},
  components: {},
  data() {
    return {
      bgStyle: require("@/assets/backgd.png"),
      ruleForm: {
        userName: "admin",
        password: "admin",
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      loading: false,
      remember: false,
    };
  },
  computed: {
    style() {
      return {
        backgroundImage: `url(${this.bgStyle})`,
        backgroundSize: "cover", // 背景图片大小自适应
        backgroundPosition: "center", // 背景图片居中显示
      };
    },
  },
  created() {
    if (localStorage.getItem("remember")) {
      this.ruleForm = JSON.parse(localStorage.getItem("remember"));
    }
  },
  methods: {
    login() {
      // if (process.env.NODE_ENV == "development") {
      //   //方便调试
      //   this.$router.push(`/user`);
      //   return;
      // }
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.loading = true;
          login(this.ruleForm)
            .then(async (res) => {
              this.loading = false;
              if (res.success) {
                this.$successMsg(res.message);
                localStorage.setItem("userInfo", JSON.stringify(res.data));
                if (this.remember) {
                  localStorage.setItem(
                    "remember",
                    JSON.stringify(this.ruleForm)
                  );
                } else {
                  if (localStorage.getItem("remember"))
                    localStorage.removeItem("remember");
                }
                // let menu = await this.getMenu();
                let menu = res.data.menuList;
                localStorage.setItem("menu", JSON.stringify(menu));
                this.$router.push(menu[0].url);
                // this.$router.push(`/user`);
              } else {
                this.$errorMsg(res.message);
              }
            })
            .catch((err) => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    },

    getMenu() {
      return new Promise((resolve, reject) => {
        getMenu().then((res) => {
          if (res.success) {
            resolve(res.data);
          } else {
            resolve([]);
          }
        });
      });
    },
  },
};
</script>


<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .common {
    display: flex;
    flex-direction: column;
    align-items: center;
    .titleimg {
      height: 100px;
    }
    .login {
      margin-top: 20px;
      width: 400px;
      // height: 280px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2),
        /* 水平偏移 | 垂直偏移 | 模糊半径 | 阴影颜色与透明度 */ 0 6px 20px
          rgba(0, 0, 0, 0.19); /* 可以添加多个阴影效果 */
      border-radius: 14px;
      padding: 20px 0px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .form {
        margin-top: 20px;
        width: 80%;
        .loginBth {
          width: 100%;
          color: white;
          background-color: #249087;
        }
      }
    }
  }
}
.form .rem {
  margin-bottom: 12px;
}
.form .rem2 {
  margin-bottom: 0px;
}

:deep(
    .check .el-checkbox__input.is-checked .el-checkbox__inner,
    .myRedCheckBox .el-checkbox__input.is-indeterminate .el-checkbox__inner
  ) {
  border-color: #249087;
  background-color: #249087;
}
:deep(.check .el-checkbox__input.is-checked + .el-checkbox__label) {
  color: #249087;
}
</style>
